<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button>按钮</button>
</body>
<script>
function sendAjax(obj) {
    // 对传入的参数做判断 - 校验
    // 验证method参数
    if(obj.method === undefined) {
        obj.method = 'get'
    } else {
        // 传递了method - 限制method必须是get/post/put/delete
        if(obj.method.toLowerCase() != 'get' && obj.method.toLowerCase() != 'post' && obj.method.toLowerCase() != 'put' && obj.method.toLowerCase() != 'delete') {
            // 手动抛出错误
            throw new Error('请求方式不正确！')
        }
    }
    // 验证url
    if(obj.url === undefined) {
        throw new Error('请求地址不能为空！')
    } else {
        if(typeof obj.url != 'string') {
            throw new Error('请求地址不正确！')
        }
    }
    // 验证async
    if(obj.async === undefined) {
        obj.async = true
    } else {
        // 传递了async
        if(typeof obj.async != 'boolean') {
            throw new Error('async必须是布尔值！')
        }
    }
    var xhr = new XMLHttpRequest
    xhr.open(obj.method, obj.url, obj.async)
    if(obj.data != undefined) {
        // 设置数据格式
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 对数据做判断如果是对象就转成字符串
        if(typeof obj.data === 'object') {
            var arr = []
            for(var key in obj.data) {
                arr.push(key + '=' + obj.data[key])
            }
            var str = arr.join('&')
            xhr.send(str)
        } else {
            xhr.send(obj.data)
        }
    } else {
        xhr.send()
    }
    // 判断同步异步
    if(obj.async === false) {
        var msg = xhr.responseText
        // console.log(msg);
        obj.success(msg)
    } else {
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                if(xhr.status >= 200 && xhr.status < 300) {
                    var msg = xhr.responseText
                    // console.log(msg);
                    obj.success(msg)
                }
            }
        }
    }


}
document.querySelector('button').onclick = function() {
    // 适用于get请求
    sendAjax({
        url: 'http://localhost:3000/user',
        success: function(msg) {
            console.log(msg);
        }
    })

    // 适用于post请求
    // sendAjax({
    //     url: 'http://localhost:3000/user',
    //     method: 'post',
    //     async: true,
    //     // data: 'name=sunqi&password=222222&email=222222@qq.com'
    //     data: {
    //         name: 'sunqi',
    //         password: '222222',
    //         email: '222222@qq.com'
    //     }
    // })

    // 适用于put请求
    // sendAjax({
    //     url: 'http://localhost:3000/user/6',
    //     method: 'put',
    //     async: true,
    //     data: 'name=zhouba&password=333333&email=333333@qq.com'
    // })
    // 适用于delete请求
    // sendAjax({
    //     url: 'http://localhost:3000/user/6',
    //     method: 'delete',
    //     async: true
    // })
}


// 对象转字符串
// var obj = {
//     name: '张三',
//     age: 12,
//     sex: '女'
// }
// // 转成：'name=张三&age=12&sex=女'
// var arr = []
// for(var key in obj) {
//     arr.push(key + '=' + obj[key])
// }
// console.log(arr);
// var str = arr.join('&')
// console.log(str);
</script>
</html>